<template>
	<view>
		<view class="content">
			<button class="content_tn" v-for="(item,index) in fenlei" @click="fl(index)" :key="index" v-bind:class="{act:item.act,btn:true}">{{item.item}}</button>
			<!-- <a href="javaScript:;" class="act btn">话费充值</a>
      <a href="javaScript:;" class="btn">流量充值</a>-->
			<view class="phone">
				<input type="number" v-model="mobile" confirm-type="done" placeholder="请输入手机号码" @input="changePhone" />
				<image src="../../static/images/tel.png" />
			</view>
			<view class="cz">
				<view class="title">请选择充值金额</view>
				<view class="cz_item">
					<button v-for="(item,index) in money" :disabled="!isgetphone" @click="hs(item,index)" :key="index" v-bind:class="{act:index ==changemoneyindex && isgetphone }  ">{{item.amount}}元</button>
				</view>
			</view>
			<view class="jiage">
				价格：
				<text class="danjia">¥ {{je}}</text>
			</view>

			<view class="phone" style="margin-bottom: 50upx;">

				<input class="input" type="password" :disabled="!btnActive" v-model="zfpwd" placeholder="支付密码" placeholder-class="placeholder" />

			</view>



			<button class="cz1" @click="chongzhi">立即充值</button>
		</view>
	</view>
</template>
<script>
	import validate from "@/common/ys-validate.js"


	export default {
		name: "topup",
		data() {
			return {
				changemoneyindex: 0,
				btnActive: true,
				isgetphone: false,
				zfpwd: '',
				mobile: '',
				money: [{
						amount: 50,
						price: 50
					},
					{
						amount: 100,
						price: 100
					},
					{
						amount: 200,
						price: 200
					},
					{
						amount: 300,
						price: 300
					},
					{
						amount: 500,
						price: 500
					}
				],
				fenlei: [{
					item: "话费充值",
					act: true
				}],
				je: 0.00,
				amount: 0,
			}
		},
		methods: {
			hs(item, index) {
				this.changemoneyindex = index
				this.je = item.amount;
				this.amount = item.amount;
			},
			fl(index) {
				let fl = this.fenlei;
				fl.forEach(element => {
					element.act = false;
				});
				this.fenlei[index].act = true;
				// this.je = item.mon;
			},
			chongzhi() {

				if (!validate.isPhone(this.mobile)) {

					this.$api.msg("请输入手机号");
					return false;
				}


				if (!this.amount) {

					this.$api.msg("请选择充值金额");
					return false;
				}

				if (!this.zfpwd) {

					this.$api.msg("请输入支付密码");
					return false;
				}

	var _self = this;
				uni.showModal({
					title: '提示',
					content: '确定给['+this.mobile+']充值话费'+this.amount+"元吗",
					success: function(res) {
						if (res.confirm) {

						
							_self.btnActive = false;
							_self.$api.http
								.post('assistance/externalApi/mobilerecharge', {
									mobile: _self.mobile,
									amount: _self.amount,
									zfpwd: _self.zfpwd
								})
								.then(res => {
									_self.$api.msg(res.msg);
									if (res.status == 200) {

										setTimeout(() => {
											uni.navigateBack({

											})
										}, 1000);

									} else
										_self.btnActive = true;

								});
						}
					}
				})
			},


			changePhone(e) {
				var tel = e.detail.value;
				if (validate.isPhone(tel)) {
					var _self = this;
					this.$api.http
						.get('assistance/externalApi/mobilequery', {
							mobile: tel,
							amount: ''
						})
						.then(res => {

							if (res.status == 200) {
								_self.isgetphone = true;
								var data = res.data;
								_self.money = data.list;
								_self.je = data.list[0].amount;
								_self.amount = data.list[0].amount;
							} else {
								_self.$api.msg(res.msg);
							}

						});


				} else
					this.isgetphone = false;
			}


		}
	};
</script>
<style>
	* {
		list-style: none;
		margin: 0;
		padding: 0;
		text-decoration: none;
	}

	body {
		height: 100%;
		background: #f5f5f5;
	}

	.content .content_tn {
		margin-right: 40upx;
		width: 184upx;
		height: 64upx;
		line-height: 40upx;
		background-color: #FFFFFF;
		display: inline-block;
	}

	.content {
		height: 100vh;
		margin-top: 40upx;
		padding: 80upx 40upx 40upx;
		background: #fff;
	}

	.act {
		background: #ff3f03 !important;
		color: #fff !important;
		border: none;
	}

	.btn {
		font-size: 30upx;
		color: #666;
		border: 2upx solid #f0f0f0;
		padding: 10upx 30upx;
		border-radius: 12upx;
	}

	.phone image {
		width: 50upx;
		height: 50upx;
		position: absolute;
		top: 10upx;
		left: 10upx;
	}

	.phone {
		line-height: 70upx;
		position: relative;
		margin-top: 50upx;
	}

	.phone input {
		width: 90%;
		height: 70upx;
		padding-left: 70upx;
		font-size: 30upx;
		outline: none;
		background-color: rgba(0, 0, 0, 0);
		border: 2upx solid #f0f0f0;
		border-radius: 10upx;
	}

	.cz .title {
		font-size: 34upx;
		color: #666;
		margin: 20upx 0;
	}

	.cz .cz_item {
		display: flex;
		flex-wrap: wrap;
	}

	.cz .cz_item .act {
		background: #ff3f03;
		color: #fff !important;
		border: none;
	}

	.cz .cz_item button {
		border-radius: 10upx;
		margin: 10upx;
		width: 200upx;
		height: 60upx;
		line-height: 60upx;
		text-align: center;
		background: #f5f5f5;
		color: #666;
	}

	.jiage {
		font-size: 34upx;
		text-align: right;
		margin: 40upx 40upx 80upx 0;
		color: #555;
	}

	.danjia {
		color: #ff3f03;
	}

	.cz1 {
		width: 100%;
		display: block;
		height: 80upx;
		background: #ff3f03;
		color: #fff;
		text-align: center;
		line-height: 80upx;
		border-radius: 10upx;
	}
</style>
